<!DOCTYPE html>
<html>

<head>
    <title>网管电话本</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//cdn.bootcss.com/weui/0.4.3/style/weui.min.css">
    <link rel="stylesheet" href="/css/netadmin.css">
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="//cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js"></script>
    <script src="//cdn.bootcss.com/vue/1.0.26/vue.min.js"></script>
</head>

<script type="text/javascript">
    window.data = null;
    (function () {
        $.ajax({
            url: '/json/netadmin.json',
            dataType: "json",
            async: false,
            success: function (json_data) {
                window.data = json_data;
            },
            error: function (e) {
                $.alert("资源加载异常，请稍后重试");
                $(".weui_dialog_ft .primary").click(function () {
                    WeixinJSBridge.call('closeWindow');
                });
            }
        });
    })();
</script>

<body>
<div class="hd">
    <h1 class="page_title">网管电话本</h1>
    <p class="page_desc">小贴士：点击人员可自动拨号</p>
</div>
<div class="phone-book">
    <div class="wrapper">
        <h3></h3>
        <ul id="member-list">
            <li>
                <h4>网络中心</h4>
                <div class="list-item none">
                    <p><a href="#" >服务地址：行政楼2楼8号窗口</a></p>
                    <p><a href="#" >服务时间：全年早上08:30-21:30</a></p>
                    <p><a href="tel:020-36903085" >服务电话：020-36903085</a></p>
                    <p><a href="tel:13535011535" >负责人长号：13535011535</a></p>
                    <p><a href="tel:661535" >负责人短号：661535</a></p>
                    <p><a href="tel:1008611" >移动铁通客服：1008611</a></p>
                </div>
            </li>
            <li v-for="dormitory in dormitories">
                <h4>@{{ dormitory.name + " " + dormitory.gender }}生宿舍</h4>
                <div class="list-item none" v-for="member in dormitory.members">
                    <p><a href="javascript:;" v-on:click="phone" name="@{{ member.name }}" shortnum="@{{ member.shortnum }}"
                          longnum="@{{ member.longnum }}">@{{ member.name }}<span>@{{ member.grade + "级" }}</span></a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="footer-wrap">
    <span>内容如有出入，请以<a href="http://nc.gcu.edu.cn/Contact/">网络中心</a>公示名单为准</span>
</div>
</body>

<script type="text/javascript">
    (function () {
        // Vue渲染界面
        new Vue({
            el: '#member-list',
            data: window.data,
            methods: {
                phone: function (event) {
                    var element;
                    if(event.target.tagName == 'SPAN')
                        element = $(event.target).parent();
                    else
                        element = $(event.target);
                    $.modal({
                        title: "拨号提醒",
                        text: "即将联系网管&nbsp;" + $(element).attr("name"),
                        buttons: [
                            {
                                text: "长号", onClick: function () {
                                    $(".weui_mask, .weui_dialog").hide();
                                    window.location.href = "tel:" + $(element).attr("longnum");
                                }
                            },
                            {
                                text: "短号", onClick: function () {
                                    var shortnum = $(element).attr("shortnum");
                                    if (shortnum) {
                                        $(".weui_mask, .weui_dialog").hide();
                                        window.location.href = "tel:" + shortnum;
                                    }
                                    else {
                                        $(".weui_mask").hide();
                                        $.alert("该网管无短号");
                                        $(".weui_dialog_ft .primary").click(function () {
                                            $("body").children(":last").hide();
                                        });
                                    }
                                }
                            },
                            {
                                text: "短信", onClick: function () {
                                    $(".weui_mask, .weui_dialog").hide();
                                    window.location.href = "sms:" + $(element).attr("longnum");
                                }
                            },
                            {
                                text: "取消", onClick: function () {
                                    $(".weui_mask, .weui_dialog").hide();
                                }
                            }
                        ]
                    });
                }
            }
        })

        //列表点击事件绑定
        var $obj = $("#member-list");
        $obj.find("h4").click(function () {
            var $div = $(this).siblings(".list-item");
            if ($(this).parent().hasClass("selected")) {
                $div.slideUp("fast");
                $(this).parent().removeClass("selected");
            }
            if ($div.is(":hidden")) {
                $("#member-list li").find(".list-item").slideUp("fast");
                $("#member-list li").removeClass("selected");
                $(this).parent().addClass("selected");
                $div.slideDown("fast");
            }
        });
    })();
</script>

</html>
